<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
    <link rel="stylesheet" href="../css/theme.css">
    <link rel="stylesheet" href="../css/user_zone.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.5.5/vue.js"></script>
</head>

<body>

<header id="header">
    <div class="avatar_form">
        <img id="avatar_img" src="../img/default_avatar.webp"
             alt="">
        <h1 class="avatar_title" id="avatar_title">南国の惠惠酱</h1>
        <p id="avatar_description" class="avatar_describe">26个英文字母不止26个</p>
    </div>
</header>

<section class="theme_width me_flex">
    <aside>
        <ul class="side_menu">
            <li class="active">个人信息</li>
            <li class="">上传列表</li>
            <li class="">我的作品</li>
            <li>收件箱</li>
            <li>收藏列表</li>
            <li>直播间</li>
        </ul>
    </aside>
    <main>
        <div class="main_of_1 info_form active">
            <a href="/logout">退出登录</a>
        </div>
        <div class="info_form main_of_2 ">
            <button class="open_up_window" id="open_up_window">上传视频</button>
            <div class="upload_top">
                <div class="active">上传中<span>3</span></div>
                <div>上传完成<span>3</span></div>
            </div>
            <ul class="upload_list">
                <li>
                    <div class="upload_progress_flex">
                        <img src="../img/default_works.webp" id="upload_cover"
                             alt="">
                        <div class="upload_body">
                            <p class="upload_queue_title" id="upload_queue_title">等待上传</p>
                            <div class="file_info_list">
                            </div>
                        </div>
                    </div>
                    <div class="circle_progress_form">
                        <span class="circle_progress_bg" id="circle_progress_bg"></span>
                        <span class="circle_num" id="circle_num">0%</span>
                    </div>
                </li>
            </ul>
        </div>
        <div class="info_form  main_of_3">
            <div class="block_form" id="works_list">
                <h3 class="block_title">全部视频
                    <span>{{amountOfAll}}条</span>
                </h3>
                <ul class="works_list">
                    <li v-for="video in videoList">
                        <div class="works_edit">
                            <svg t="1627607530318" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                 xmlns="http://www.w3.org/2000/svg" p-id="1998" width="32" height="32">
                                <path d="M955.2384 1024H40.0896a40.0896 40.0896 0 0 1 0-80.1792h915.1488a40.0896 40.0896 0 0 1 0 80.1792zM745.472 390.2976L559.4112 200.704l102.9632-105.0112 186.6752 189.5424-103.2704 105.0624h-0.3072zM406.3744 735.744l-230.2464 40.704 44.7488-229.6832L503.808 257.4848l186.0608 189.5424-283.4944 288.768z m523.7248-480.9728L692.5312 12.5952A42.7008 42.7008 0 0 0 663.2448 0a41.5744 41.5744 0 0 0-29.2352 12.5952L157.0816 497.3568a39.2192 39.2192 0 0 0-12.288 22.528L88.3712 819.2a39.7824 39.7824 0 0 0 10.8032 35.1232 38.2976 38.2976 0 0 0 34.5088 11.4176L430.08 813.568a39.4752 39.4752 0 0 0 23.9616-11.3664l476.0576-486.5536a43.6224 43.6224 0 0 0 12.288-29.2864 43.3152 43.3152 0 0 0-12.288-29.2352v-2.3552z"
                                      p-id="1999" fill="#ffffff"></path>
                            </svg>
                        </div>
                        <a v-bind:href="'/video_room.html?video_uuid='+video.uuid" target="_blank">
                            <img v-bind:src="video.cover"
                                 alt="">
                            <div class="works_bottom">
                                <h4>{{video.title}}</h4>
                                <span class="works_visited">浏览量：{{video.visit}}</span>
                                <span class="works_update">发布日期：{{video.uploadDate}}</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <div class="main_of_4 info_form">收件箱</div>
        <div class="main_of_5 info_form">收藏列表</div>
        <div class="main_of_6 info_form">直播间</div>
    </main>
</section>


<div class="window_upload" id="window_upload">
    <div class="upload_form">
        <div class="form_top">
            <h2>上传你的视频</h2>
        </div>
        <div class="form_body">
            <div class="step_progress" id="step_progress">
                1、选择要上传的视频
            </div>
            <div class="form_operation" id="form_operation_1">
                <input type="file" name="" id="videoFileInput" class="videoFileInput" accept="video/*">
                <video src="" class="form_video" controls id="selected_priview"></video>
            </div>
            <div class="form_operation" id="form_operation_2">
                <div class="cover_file">
                    <div><input type="radio" name="cover_way" class="cover_way" checked id="">本地上传封面</div>
                    <input type="file" name="" id="cover_img" accept="image/x-png,image/gif,image/jpeg,image/bmp">
                    <img src="" class="cover_local_preview" id="cover_local_preview" alt="">
                </div>
                <div class="cover_screenshot">
                    <div><input type="radio" name="cover_way" class="cover_way" id="">从视频选择指定画面</div>
                    <video src="" class="form_video" controls id="selected_priview_2"></video>
                </div>
                <div class="cover_random">
                    <div><input type="radio" name="cover_way" class="cover_way" id="">随机从视频选择画面</div>
                </div>
            </div>
            <div class="form_operation" id="form_operation_3">
                <table>
                    <tr>
                        <td>作品标题</td>
                        <td><input class="videoTitleInput" type="text" name="" id="videoTitleInput"></td>
                    </tr>
                    <br>
                    <tr>
                        <td>作品描述</td>
                        <td><textarea class="videoDescInput" id="videoDescInput"></textarea></td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button class="btn_read_upload" id="btn_read_upload">上传</button>
                        </td>
                    </tr>
                </table>
            </div>
            <div class="step_operation">
                <button id="step_close">关闭</button>
                <button disabled id="step_previous">上一步</button>
                <button disabled id="step_next">下一步</button>
            </div>
        </div>
    </div>
</div>
<div class="window_conform">
    <span>为了保证视频能够顺利上传，请在上传过程中保持网络连接！</span>

    <button>确定</button>
</div>

<script src="../js/user_zone.js"></script>
</body>

</html>